<template>
  <div class="left_nav_bg">
    <div class="left_nav">
      <div class="left_center">
        <span v-show="!isCollapse"></span>
        <i style="font-size: 24px;padding: 20px 0;cursor: pointer;" :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click="chooseCollapse"></i>
      </div>
      <el-menu :key="timer" :unique-opened="true" :collapse="isCollapse" :default-active="activeIndex" text-color="rgba(0, 0, 0, 0.75)" active-text-color="#000" class="el-menu-vertical-demo" @select="handleSelect">
        <template v-for="(item, index) in list">
          <el-submenu v-if="item.arr" :key="index" :index="item.index" popper-class="popper">
            <template slot="title">
              <icon v-if="item.name" :name="item.name" :w="22" :h="18"></icon>
              <span slot="title" style="margin-left: 4px;">
                {{ item.title }}
              </span>
            </template>
            <template v-for="(arritem, arrindex) in item.arr">
              <leftNavItems :key="arrindex" :item="arritem"></leftNavItems>
            </template>
          </el-submenu>
          <el-menu-item v-if="!item.arr" :key="index" :index="item.index">
            {{item.title}}
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import styles from "@/app.scss";
import addTab from "@/common/addTab.js";
import mixin from "@/mixins/mixin.js";
import leftNavItems from "./leftNavItems.vue";
import { mapGetters } from "vuex";
import { getPerMission } from '@/utils/auth.js';
// import { setTimeout } from 'timers';
import { getToken } from '@/utils/auth';
export default {
  components: {
    leftNavItems,
  },
  mixins: [mixin],
  data() {
    return {
      activeIndex: "",
      isCollapse: false,
      bg_color: styles.bg_color,
      timer: "",
    };
  },
  watch: {
    /* 激活index
     * @description 监听路由变化。路由变化就开始执行
     */
    $route: {
      handler: function () {
        if (this.$route.name == 'board_Salesofkanban') {
          this.$store.dispatch("ChangeICPSindex", this.$route.query.name);
          return
        }
        this.activeIndex = this.$route.name;
      },
      deep: true,
    },
    /*
     *优化左侧导航的位置BUG
     */
    list: {
      handler: function () {
        this.timer = new Date().getTime();
      },
      deep: true,
    },
  },
  created() {
    this.activeIndex = this.$route.name;
    this.$store.dispatch("ChangeCollapse", this.isCollapse);
  },
  computed: {
    ...mapGetters({
      /*这是顶部激活list*/
      list: "getlist",
    }),
  },
  methods: {
    handleSelect(key) {
      /**
       * @Description: 判断是否是外链
       * @param {*} getPerMission
       * @Author: wangwangwang
       */
      const currentData = this.list.find(item => item.index === key);
      if (currentData?.type*1 === 2) {
        window.open(`${currentData.redirectUrl}?token=${getToken()}`, '_blank')
        return
      }
    //   if (getPerMission()?.functionLimitList == '' || getPerMission()?.functionLimitList == null || getPerMission()?.functionLimitList == false || getPerMission()?.functionLimitList == undefined) {
    //     this.$message({
    //       message: '长时间未响应请重新登录！',
    //       type: 'warning'
    //     });
    //     setTimeout(() => {
    //       this.$router.push({ name: 'login' })
    //     }, 1500)
    //     return
    //   }
      if (key.indexOf('board_Salesofkanban') !== -1) {
        let index = getPerMission()?.functionLimitList.find(res => (res.code == key))
        this.$router.push({ name: "board_Salesofkanban", query: { functionId: index.functionId, name: index.code } });
        return
      }
      if (key.indexOf('insideUrl') !== -1) {
        let newData = getPerMission()?.functionLimitList.find(res => (res.code == key));
        this.$router.push({ name: "insideUrl",query: {url: newData.redirectUrl}});
        return
      }
      addTab.$emit("name", key, 2);
    },
    chooseCollapse() {
      this.isCollapse = !this.isCollapse;
      this.$store.dispatch("ChangeCollapse", this.isCollapse);
    },
  },
};
</script>

<style lang="scss">
@import '@/app.scss';
.left_nav {
  .el-menu {
    border: 0 !important;
  }
  .el-menu--collapse {
    width: 66px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    min-width: 170px;
    max-width: 170px;
  }
  .el-submenu .el-menu-item {
    @include ellipsis;
    font-size: $font_size;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    min-width: 170px;
    max-width: 170px;
  }
  .el-menu-item.is-active {
    background-color: $bg_background1 !important;
    color: #ffffff !important;
    .el-button {
      color: #ffffff !important;
    }
  }
  .el-submenu__title:hover {
    i {
      color: #000000 !important;
    }
    background-color: $bg_background3 !important;
  }
  .el-menu-item:not(.is-active):hover {
    color: #000000;
    background-color: $bg_background3 !important;
  }
  .el-submenu__title {
    @include discen_al;
    @include ellipsis;
    font-size: $font_size;
    border-top: 1px solid #f0fcf6 !important;
    border-bottom: 1px solid #f0fcf6 !important;
  }
  .is-opened > .el-submenu__title,
  .is-active > .el-submenu__title {
    i {
      color: $bg_color !important;
    }
    color: $bg_color !important;
    background: #f6fffd !important;
    border-top: 1px solid rgba(0, 167, 84, 0.05) !important;
    border-bottom: 1px solid rgba(0, 167, 84, 0.05) !important;
    box-shadow: 0px 3px 9px rgba(1, 138, 70, 0.1);
    position: relative;
    z-index: 999;
  }
}
/*优化显示不全*/
.popper {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: auto;
}
.popper::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
.popper::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.popper::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.popper::-webkit-scrollbar-thumb:hover {
  background: #333;
}
.popper::-webkit-scrollbar-corner {
  background: #179a16;
}
.popper {
  .el-menu-item,
  .el-submenu__title {
    font-size: $font_size;
  }
  .el-menu-item:not(.is-active):hover {
    color: #000000;
    background-color: $bg_colorTable !important;
  }
}
/*兼容火狐*/
.left_nav_bg {
  padding: 3px;
  background: radial-gradient(rgba(0, 167, 84, 0.12), #f2f5f3);
}
.left_nav {
  background: #ffffff;
  border-radius: 4px;
  //box-shadow: 0px 0px 6px red;
}
.left_center {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
}
</style>
